<template>
  <div class="XInput" :class="[{hasIcon:icon,focused:focused}]">
    <i class="XInput-icon" v-if="icon" :class="[icon]"></i><input class="XInput-input" :type="type" :placeholder="placeholder" v-model="value" @focus="focused=true" @blur="focused=false">
  </div>
</template>

<script>
  export default {
    props: {
      type: {
        type: String,
        default: 'text',
        validator: (v) => ['text', 'password'].indexOf(v) > -1
      },
      icon: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String
      }
    },
    data: () => ({
      focused: false
    })
  }
</script>

<style lang="stylus">
  @import '../styles/variables'
  @import '../styles/mixins'
  .XInput
    box-sizing: border-box
    size: 100% auto
    border: 2px solid $grayDark
    shadow-style: 2px $shadow true
    border-radius: $radius
    overflow: hidden
    transition: all .2s
    color: darken($grayDark, 20%)
    &.hasIcon
      padding-left: 2.5em
      .XInput-icon
        display: inline-block
        margin-left: -2em
        width: 2em
        text-align: center
        font-size: 1.2em
      .XInput-input
        padding-left: 0
    &.focused
      color: darken($grayDark, 50%)
      border-color: darken($grayDark, 10%)
      shadow-style: 2px darken($grayDark, 10%) true
    &-input
      box-sizing: border-box
      padding: 1em
      size: 100%
      outline: none
      border: none
      background: transparent
      color: inherit
</style>